<div class="card name-panel" *ngIf="record && name">
  <div class="card-header">
    <h2 class="h3">
      {{record.typeLabel | translate}}:
      <span class="strong cred-link name" *ngIf="!link">{{name.text}}</span>
      <a [routerLink]="record.link | localize" class="body-link cred-link name" *ngIf="link">{{name.text}}</a>
    </h2>
    <span class="badge badge-warning" *ngIf="name.inactive" translate>cred.inactive</span>
  </div>
  <div class="card-body form-body">
    <div class="row form-group">
      <div class="col-sm-7">
        <attribute-list [records]="record.attributes"></attribute-list>
      </div>
      <div class="col-sm-5">
        <label class="control-label" translate>cred.issuer</label>
        <div class="form-field">
          <a [routerLink]="['/issuer', issuer.id] | localize" class="body-link issuer-link">{{issuer.name}}</a>
        </div>
        <label class="control-label" translate>cred.start-date</label>
        <div class="form-field" *ngIf="name.last_updated > '0100-01-01'">
          <span class="claim-info date">{{name.last_updated | dateFormat: 'effectiveDate'}}</span>
        </div>
      </div>
    </div>
    <div class="row form-group" *ngIf="record.addresses?.length">
      <div class="col-sm-5">
        <div class="form-field address-list" *ngFor="let address of addresses">
          <label class="control-label" translate>{{address.addressType}}</label>
          <address-view [record]="address"></address-view>
        </div>
      </div>
    </div>
  </div>
</div>
